<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
    	<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css" />
		<style type="text/css">
			.navbar-brand {
				padding: 0;
			}
			.router-link-active {
				background: #1BBCF2!important;  
				color: #fff!important;
			}
		</style>
		<script src="../lib/vue.js" type="text/javascript" charset="utf-8"></script>
		<script src="../lib/vue-router.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<div class="container">
				<nav class="navbar navbar-default">
				  <div class="container-fluid">
				    <div class="navbar-header">
				      <a class="navbar-brand" href="#">
				      	<img src="logo.png" height="50"/>
				      </a>
				    </div>
				
				    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
				      <ul class="nav navbar-nav">
				        <!-- 使用 router-link 组件来导航. -->
					    <!-- 通过传入 `to` 属性指定链接. -->
					    <!-- <router-link> 默认会被渲染成一个 `<a>` 标签 -->
				        <li> <router-link to="/home" >Home</router-link></li>
				        <li> <router-link to="/list" >List</router-link></li>
				        <li> <router-link to="/about">About</router-link></li>
				      </ul>
				    </div><!-- /.navbar-collapse -->
				  </div><!-- /.container-fluid -->
				</nav>
			</div>
			<div class="container">
				  <!-- 路由出口 -->
				  <!-- 路由匹配到的组件将渲染在这里 -->
				  <router-view></router-view>
			</div>
		</div>
		
		<script type="text/javascript">
			// 1. 定义（路由）组件。
			
			//创建子组件，相当于路径对应的子页面
			
			//创建组件 Home
			var Home ={
			    template: `<div class="jumbotron">
						  <h1>{{msg}}</h1>
						  <p>...</p>
						  <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more</a></p>
						</div>`,
			    data: function() {
			        return {
			            msg: 'Hello, vue router!'
			        }
			    }
			}
			
			
			//创建组件  List
			var List ={
			    template: `<div class="list-group">
							  <a href="#" class="list-group-item" v-for="item in msg">
							    {{item.title}}
							  </a>
							</div>`,
			    
			    data: function() {
			        return {
			            msg:[
			            	{title:'Dapibus ac facilisis in'},
			            	{title:'Morbi leo risus'},
			            	{title:'Porta ac consectetur ac'},
			            	{title:'Vestibulum at eros'},
			            	{title:'Cras justo odio'},
			            ]
			        }
			    }
			}
			
			//创建组件  About
			var About = {
			    template: '<div><h1>About</h1><p>This is the tutorial about vue-router.</p></div>'
			}
			
			
			
			// 2. 定义路由,每个路由应该映射一个组件。
			const routes = [
			  { path: '/home', component: Home },
			  { path: '/list', component: List },
			  { path: '/about', component: About }
			]
			
			// 3. 创建 router 实例，然后传 `routes` 配置
			const router = new VueRouter({
			  routes  // （缩写）相当于 routes: routes
			})
			
			// 4. 创建和挂载根实例。
			// 记得要通过 router 配置参数注入路由，
			// 从而让整个应用都有路由功能
			const app = new Vue({
			  router
			}).$mount('#app')
			
			// 现在，应用已经启动了！
		</script>
	</body>
</html>
